<template>
  <div id="orderSeePage">
    <el-row :gutter="10" style="padding-bottom: 15px">
      <el-col :span="4" class="flex">
        <span class="nowrap">支付方式:</span>

        <el-select v-model="orderInfo.payType" size="small" clearable placeholder="请选择">
          <el-option v-for="item in payType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex">
        <span class="nowrap">订单状态:</span>

        <el-select v-model="orderInfo.status" size="small" clearable placeholder="请选择">
          <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" class="flex">
        <span class="nowrap">起始时间:</span>

        <div class="block">
          <el-date-picker style="width: 100%" v-model="orderInfo.beginTime" size="small" @change="change" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6" class="flex">
        <span class="nowrap">结束时间:</span>

        <div class="block ">
          <el-date-picker style="width: 100%" v-model="orderInfo.endTime" size="small" @change="change2" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="padding-bottom: 10px">
      <el-col :span="6" class="flex">
        <span class="nowrap">客户订单号:</span>
        <el-input v-model="orderInfo.outOrderNo" size="small" placeholder="请输入完整会员号" ></el-input>

      </el-col>
      <el-col :span="5" class="flex">
        <span class="nowrap">平台订单号:</span>

        <el-input v-model="orderInfo.orderNo" size="small" placeholder="请输入完整订单号" ></el-input>
      </el-col>
      <el-col :span="6" class="flex">
        <span class="nowrap">上游订单号:</span>

        <el-input v-model="orderInfo.upOrderNo" size="small" placeholder="请输入完整订单号"></el-input>
      </el-col>
      <el-col :span="7" class="flex">

        <el-button type="primary" size="mini" @click="queryOrderList(0)">查询</el-button>
        <el-button type="primary" size="mini" @click="queryOrderList(1)">今天</el-button>
        <el-button type="primary" size="mini" @click="queryOrderList(2)">昨天</el-button>
        <el-button type="primary" size="mini" @click="orderCountUser">统计</el-button>
        <el-button type="primary" size="mini" @click="queryOrderList(9)">导出</el-button>
      </el-col>
    </el-row>

    <el-row class="orderCheck header">
      <el-col :span="4">失败金额：<span class="red">{{countObj.failMoeny || 0}}</span> 元</el-col>
      <el-col :span="4">失败数量：<span class="red">{{countObj.failNumber || 0}}</span> 单</el-col>
      <el-col :span="4">成功金额：<span class="red">{{countObj.successMoeny || 0}}</span> 元</el-col>
      <el-col :span="4">成功数量：<span class="red">{{countObj.successNumber || 0}}</span> 单</el-col>
      <el-col :span="4">总金额：<span class="red">{{countObj.totalMoeny || 0}}</span> 元</el-col>
      <el-col :span="4">总数量：<span class="red">{{countObj.totalNumber || 0}}</span> 单</el-col>
    </el-row>
    <el-table :data="tableData" border stripe style="width: 100%"  v-loading="loading1">
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="businessName" label="商户名">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160" >
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="160">
      </el-table-column>
      <el-table-column prop="amount" label="金额">
      </el-table-column>
      <el-table-column prop="outOrderNo" label="订单号" width="200">
      </el-table-column>
      <el-table-column prop="payType" label="支付类型">
      </el-table-column>
      <el-table-column prop="status" label="状态">
      </el-table-column>
      <el-table-column prop="body" label="备注">
      </el-table-column>
    </el-table>

    <div class="block" style="padding: 15px;text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orderInfo.pageNumber"
        :page-sizes="[5, 8, 10, 13, 15]"
        :page-size="orderInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'
  import payType from '../../assets/paytype'
  export default {
    name: "orderSee",
    data () {
      return {
        value1: "",
        loading1: false,
        total: 1,
        payType: payType,
        orderType: [{
          value: 1,
          label: '待发起'
        }, {
          value: 3,
          label: '待支付'
        }, {
          value: 4,
          label: '支付成功'
        },
          {
            value: 5,
            label: '交易完成'
          },
          {
            value: 6,
            label: '已结算'
          }],
        value4: '',
        tableData: [],
        orderInfo: {
          beginTime: undefined,
          endTime: undefined,
//					businessId:'',
          status: undefined,
          payType: undefined,
          outOrderNo: undefined,
          orderNo: undefined,
          upOrderNo: undefined,
          pageSize: 10,
          pageNumber: 1
        },
        countObj:{}
      }
    },
    created() {

    //  this.queryOrderList()
    },
    methods: {

//			getBusinessList() {
//				this.loading1 = true;
//				let _this = this;
//				this.$api.getBusinessList(this.$route.query.groupId, {
//					pageSize: this.pageSize,
//					pageNumber: this.pageNumber
//				}).then(res => {
//					if(res.code == '000000') {
//						_this.loading1 = false;
//						_this.businessList = res.data.list;
//						_this.total = res.data.totalRow;
//						console.log(res.data)
//					}
//				})
//			},
      change(val) {
        if(val === undefined){
          this.orderInfo.beginTime = val
        }else if(val && val !== undefined && val !== ''){
          this.orderInfo.beginTime = Date.parse(val);
        }else{
          this.orderInfo.beginTime = undefined
        }
      },
      change2(val){
        if(!val){
          this.orderInfo.endTime =undefined
        }else{
          this.orderInfo.endTime = Date.parse(val);
        }
      },
      queryOrderList(mes) {
        if(this.orderInfo.beginTime == ""){
          this.orderInfo.beginTime = undefined
        }
        if(this.orderInfo.endTime == ""){
          this.orderInfo.endTime = undefined
        }
        this.loading1 = true;

        var timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
        if(mes!=10){
          for(let item in this.countObj){
            console.log(this.countObj[item])
            this.countObj[item] = 0
          }
        }
        if(mes == 1){
          //今天的
          this.orderInfo.beginTime = timeStamp*1000
          this.orderInfo.endTime = undefined
          this.orderInfo.pageNumber=1
        }
        if(mes == 2){
          //昨天的
          this.orderInfo.beginTime = timeStamp*1000 - 86400 * 1000
          this.orderInfo.endTime = timeStamp*1000
          this.orderInfo.pageNumber=1
        }
        if (mes == 9) {
          this.loading1 = false;
          if(this.orderInfo.endTime && this.orderInfo.beginTime){
            if (this.orderInfo.endTime - this.orderInfo.beginTime > 86400 * 3 *1000){
              this.$message.error('选择时间不能超过3天')
            }else{
              window.open('/ddj/order/export?' + this.linkUrlParams(this.orderInfo))
            }
          } else {
            this.$message.info('请选择开始时间和结束时间')
          }
        } else {
          this.$api.getOrderList(this.orderInfo).then(res => {
            if (res.code == '000000') {
              console.log(res.data);
              this.total = res.data.totalRow;
              this.loading1 = false;

              this.tableData = res.data.list;
              this.tableData.forEach(item => {
                if (item.createTime) {
                  let date = new Date(item.createTime);
                  item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM')
                }
                if (item.payTime) {
                  let date = new Date(item.payTime);
                  item.payTime = dateformat(date, 'yyyy-mm-dd HH:MM')
                }
                switch (item.payType) {
                  case 0:
                    item.payType = '全部';
                    break;
                  case 1:
                    item.payType = '支付宝扫码';
                    break;
                  case 2:
                    item.payType = '支付宝wap';
                    break;
                  case 3:
                    item.payType = '京东支付';
                    break;
                  case 4:
                    item.payType = 'QQ支付';
                    break;
                  case 5:
                    item.payType = '快捷支付';
                    break;
                  case 6:
                    item.payType = '微信扫码';
                    break;
                  case 7:
                    item.payType = '微信H5';
                    break;
                  case 8:
                    item.payType = 'QQwap';
                    break;
                  case 9:
                    item.payType = '银联扫码';
                    break;
                  case 100:
                    item.payType = '支付宝';
                    break;
                  default :
                    break;
                }
                switch (item.status) {
                  case 1:
                    item.status = '待发起';
                    break;
                  case 3:
                    item.status = '待支付';
                    break;
                  case 4:
                    item.status = '支付成功';
                    break;
                  case 5:
                    item.status = '交易完成';
                    break;
                  case 6:
                    item.status = '已结算';
                    break;

                  default :
                    break;
                }
              })
              this.$message({
                type: 'success',
                message: '查询成功'
              })
            }

          })
        }

      },
      linkUrlParams(obj) {
        let str = ''
        if (typeof obj === 'object') {
          for (let i in  obj) {
            if (obj[i]) {
              str = str + i + '=' + obj[i] + '&'
            }
          }
          let mid = str.split('')
          mid.pop()
          return mid.join('')
        }
      },
      orderCountUser () {
        if(this.orderInfo.beginTime == ""){
          this.orderInfo.beginTime = 0
        }
        if(this.orderInfo.endTime == ""){
          this.orderInfo.endTime = Date.now()
        }
        this.$api.getUserOrderCount(this.orderInfo).then(res => {
          this.$message.success('统计成功');
          this.countObj = res.data
        })
      },
      handleCurrentChange(val) {
        this.orderInfo.pageNumber = val;
        this.queryOrderList(10)
      },
      handleSizeChange (val) {
        this.orderInfo.pageSize = val;
        this.queryOrderList(10)
      }
    }
  }
</script>

<style lang="less">
  #orderSeePage {

    height: 100%;
    th {
      text-align: center;
    }
    .red{
      color: red;
    }
    .nowrap{
      padding-right: 6px;
      font-size: 14px;
    }
    .flex{
      align-items: center;
    }

    /*.el-input {*/
      /*width: 110px;*/
      /*display: inline-block;*/
      /*margin-right: 20px;*/
      /*margin-left: 6px;*/
    /*}*/
    .header {
      /*padding: 18px 40px;*/
      font-size: 12px;
      white-space: nowrap;
      display: flex;
      justify-content: center;
    }
    .width1 {
      width: 160px;
    }
    .orderCheck {
      font-size: 14px;
      background-color: lightyellow;
      padding: 10px;
    }
  }
</style>
